<template>
  <div class="box">
        <div class="centen">
            <!-- 头部 -->
            <div class="centent1">
                <div class="centent1-1">商品</div>
                <div class="centent1-2">
                    <span>详情</span>
                </div>
            </div>

            <!-- 表格 -->
            <div class="table">
                <h1>商品规格</h1>
                <div class="table1">
                    <div class="table1-2">
                        <div class="table1-2-1">
                            商品编号
                        </div>
                        <div class="table1-2-2">4212053</div>
                    </div>
                    <div>规格参数</div>                                              
                    <div class="table1-2">
                        <div class="table1-2-1">
                            <p>产品质量</p>
                            <p>（Kg）</p>
                        </div>
                        <div class="table1-2-2">4.775</div>
                    </div>
                    <div class="table1-2">
                        <div class="table1-2-1">
                            包装
                        </div>
                        <div class="table1-2-2">整箱装</div>
                    </div>
                    <div class="table1-2">
                        <div class="table1-2-1">
                            容量
                        </div>
                        <div class="table1-2-2">500ml*4瓶</div>
                    </div>
                    <div>主体</div>
                    <div class="table1-2">
                        <div class="table1-2-1">
                            等级
                        </div>
                        <div class="table1-2-2">优级</div>
                    </div>
                    <div class="table1-2">
                        <div class="table1-2-1">
                            香型
                        </div>
                        <div class="table1-2-2">清香型</div>
                    </div>
                    <div class="table1-2">
                        <div class="table1-2-1">
                            储存方式
                        </div>
                        <div class="table1-2-2">常温储存</div>
                    </div>
                    <div class="table1-2">
                        <div class="table1-2-1">
                            省份
                        </div>
                        <div class="table1-2-2">其他</div>
                    </div>
                    <div class="table1-2">
                        <div class="table1-2-1">
                            酒精灯
                        </div>
                        <div class="table1-2-2">40</div>
                    </div>

                </div>
                <!-- <table>
                    <tr>
                        <td>商品编号</td>
                        <td>4212053</td>
                    </tr>
                    <tr class="table1">
                        <td colspan="2">规格参数</td>
                    </tr>
                    <tr>
                        <td>产品重量
                            <br>
                            (kg)
                        </td>
                        <td>4.775</td>
                    </tr>
                    <tr>
                        <td>包装</td>
                        <td>整箱装</td>
                    </tr>
                    <tr>
                        <td>容量</td>
                        <td>500ml*4瓶</td>
                    </tr>

                    <tr class="table1">
                        <td colspan="2">主体</td>
                    </tr>
                    <tr>
                        <td>等级</td>
                        <td>优级</td>
                    </tr>
                    <tr>
                        <td>香型</td>
                        <td>清香型</td>
                    </tr>
                    <tr>
                        <td>储存方法</td>
                        <td>常温储存</td>
                    </tr>
                    <tr>
                        <td>省份</td>
                        <td>其他</td>
                    </tr>
                    <tr>
                        <td>酒精灯</td>
                        <td>40</td>
                    </tr>
                </table> -->
            </div>

            <!-- 商品详情 -->
            <div class="sp">
                <div class="sp1">
                    <h1>商品详情</h1>
                    <img src="/static/imgs_s05/s05_pjxb.png" alt="">
                </div>
            </div>

            <!-- 产品参数 -->
            <div class="cp">
                <div class="cp1">
                    <h1>产品参数</h1>
                    <div class="cp2">
                        <h1>[金奖青春版]</h1>
                        <div class="aaa">
                            <div class="cpcs">
                                <p class="cpcs1">
                                    <span>原</span>料
                                </p>
                                <p>
                                    高粱、水
                                </p>
                            </div>

                            <div class="cpcs2">
                                <div class="cpcs2-1">
                                    <div class="cpcs2-1-1">
                                        <p>
                                            酒精含量
                                        </p>
                                        <p>
                                            40%Vol
                                        </p>
                                    </div>

                                    <div class="cpcs2-1-2">
                                        <p>
                                            储存方法
                                        </p>
                                        <p>
                                            常温保存
                                        </p>
                                    </div>
                                </div>

                                <div class="cpcs2-2">
                                    <div class="cpcs2-1-1">
                                        <p>
                                            规格
                                        </p>
                                        <p>
                                            100ml*12瓶/箱
                                        </p>
                                    </div>

                                    <div class="cpcs2-1-2">
                                        <p>
                                            产地
                                        </p>
                                        <p>
                                            中国 重庆
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="a3">
                                <div class="a3-1">
                                    <p>
                                        产品清单
                                    </p>
                                </div>

                                <div class="a3-2">
                                    <p>
                                        箱子*1、酒*12瓶
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- <table>
                            <tr>
                                <td class="introduce2"><span>原</span>料</td>
                                <td colspan="4"><span>高粱、水</span></td>
                            </tr>
                            <tr align="center">
                                <td>酒精含量</td>
                                <td class="in1"><span>40%Vol</span></td>
                                <td class="in2 introduce2"><span>规</span>格</td>
                                <td colspan="2"><span>100ml*12瓶/箱</span></td>
                            </tr>

                            <tr align="center">
                                <td>储存方法</td>
                                <td class="in1"><span>常温保存</span></td>
                                <td class="in2 introduce2"><span>产</span>地</td>
                                <td colspan="2"><span>中国 重庆</span></td>
                            </tr>

                            <tr class="introduce3">
                                <td>产品清单</td>
                                <td colspan="4"><span>箱子*1、酒*12瓶</span></td>
                            </tr>
                        </table> -->
                        <div class="gg">
                            <img src="/static/imgs_s05/s05_b1.png" alt="">
                        </div>
                        <button>更多详细信息</button>
                    </div>


                </div>
            </div>
            <div class="bottom">
                <div class="bottom1">
                    <img src="/static/imgs_s05/s05_w.png" alt="">
                    <span>已收藏</span>
                </div>
                <div class="bottom2">
                    <p>加入购物车</p>
                </div>
                <div class="bottom3">
                    <p>立即购买</p>
                </div>
            </div>
        </div>


    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 100%;
            background: #EEE;
            display: flex;
            height: 1000px;
            flex-direction: column;
            margin-bottom: 100px;

        }

        .centen {
            width: 100%;
        }

        .centent1 {
            width: 100%;
            height: 44px;
            display: flex;
            flex-direction: row;
            text-align: center;
            margin-bottom: 10px;
        }

        .centent1 .centent1-1 {
            width: 50%;
            height: 44px;
            line-height: 44px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .centent1 .centent1-2 {
            width: 50%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            font-size: 13px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
        }

        .centent1 .centent1-2 span {
            display: inline-block;
            border-bottom: 2px solid rgba(50, 177, 108, 1);
        }

        /* 表格的 */
        .table {
            width: 100%;
            background: white;
            height: 355px;
            margin-bottom: 10px;
        }

        table {
            margin: 0 auto;
            border: 1px #BBB solid;
            width: 96%;
            box-sizing: border-box;
        }

        .table table tr td {
            height: 25px;
            line-height: 25px;
            border: 1px #BBB solid;
            padding-left: 10px;
        }

        .table tr>td:nth-child(2n-1) {
            width: 30%;
        }

        .table h1 {
            margin-left: 10px;
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: bolder;
        }

        .table .table1 {
            font-weight: bolder;
        }

        /* 商品详情 */
        .sp {
            width: 100%;
            height: 600px;
            background: white;
            padding-bottom: 50px;
        }

        .sp .sp1 {
            margin: 0 auto;
            width: 96%;
            height: 600px;
        }

        .sp h1 {
            font-weight: bolder;
            height: 49px;
            line-height: 49px;
            margin-left: 8px;
        }

        .sp .sp1 img {
            width: 100%;
            height: 490px;
        }

        /* 产品参数 */
        .cp {
            width: 100%;
            background: white;
            height: 572px;
        }

        .cp1 {
            width: 92%;
            background: #DDD;
            height: 560px;
            /* margin: 0 auto; */
            border-radius: 6px;

        }

        .cp1>h1 {
            height: 80px;
            font-size: 30px;
            font-weight: bolder;
            line-height: 80px;
            text-align: center;
        }

        .cp2 {
            width: 96%;
            margin: 0 auto;
            background: white;
            border-radius: 6px;
            height: 172px;
        }

        .cp1 .cp2 h1 {
            height: 40px;
            width: 96%;
            margin: 0 auto;
            line-height: 40px;
            font-size: 16px;
            font-weight: bolder;
            margin-left: 6px;
            border-bottom: 1px #bbb solid;
        }

        .cp2 tr>td:nth-child(2n-1) {
            width: 20%;
        }

        .cp2>table {
            box-sizing: border-box;
            width: 96%;
            margin-left: 10px;
            border: none;
        }

        .cp2 table span {
            margin-right: 25px;
        }

        .cp2 table tr {
            border-bottom: 1px solid #bbb;
        }

        .cp2 td {
            height: 30px;
        }

        .introduce2 span {
            margin-right: 10px;
        }

        .cp2 table .introduce3 {
            border: none;
        }

        .cp2 table .in1 {

            border-right: 1px solid #bbb;

        }

        .cp2 table .in2 {
            box-sizing: border-box;

        }

        .gg {
            width: 100%;
        }

        .gg img {
            margin-top: 10px;
            width: 100%;
            height: 160px;
            margin-left: 21px;
            margin: 0 auto;
        }

        .cp2 button {

            margin: 66px 128px 50px 112px;
            display: inline-block;
            width: 137px;
            height: 27px;
            line-height: 27px;
            border: 0px solid rgba(142, 142, 142, 1);
            border-radius: 14px;
            background: white;
        }

        .bottom {
            position: fixed;
            bottom: 0;
            text-align: center;
            line-height: 44px;
            width: 100%;
            height: 44px;
            bottom: 0px;
            background: red;
            display: flex;
        }

        .bottom1 {
            display: flex;
            flex-direction: column;
            width: 20%;
            height: 44px;
            background: skyblue;
            font-size: 9px;

            font-weight: 400;
            color: rgba(50, 177, 108, 1);
            line-height: 0px;

        }

        .bottom1 span {
            display: inline-block;
            width: 27px;
            height: 9px;
            margin-top: 7px;
            margin-left: 22px;
        }

        .bottom1 img {
            width: 18px;
            height: 18px;
            margin: 0 auto;
            margin-top: 10px;

        }

        .bottom2 {
            width: 30%;
            height: 44px;
            background: #F19149;
            font-size: 14px;

            font-weight: 400;
            color: rgba(253, 249, 248, 1);
        }

        .bottom3 {
            width: 50%;
            height: 44px;
            background: #32B16C;
            font-size: 14px;

            font-weight: 400;
            color: rgba(253, 249, 248, 1);
        }

        /* 改 */
        .aaa {
            /* display: flex; */
            box-sizing: border-box;
            padding-left: 6px;

        }

        .cpcs {
            display: flex;
            height: 30px;
            line-height: 30px;
            padding-left: 8px;
        }

        .cpcs p {
            margin-right: 40px;
        }

        .cpcs1 span {
            margin-right: 20px;
        }

        /* 酒精含量 */
        .cpcs2 {
            display: flex;
            width: 96%;
            /* padding-left: 5px; */
         
            box-sizing: border-box;
            border: 1px solid #AAA;
            margin: 0 auto;
            border-left: none;
            border-right: none;
        }

        .cpcs2-1 {
            width: 45%;
            height: 60px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #AAA;
        }

        .cpcs2-1-1 {
            height: 30px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            border-bottom: 1px solid #AAA;
        }

        .cpcs2-1-2 {
            height: 30px;
            line-height: 30px;
            display: flex;
        }

        .cpcs2-1-2 p {
            margin-right: 0px;
        }

        .cpcs2-1-2 p:nth-child(2) {
            color: #000;
        }

        .cpcs2-1-1 p {
            margin-right: 0px;
        }

        .cpcs2-2 {
            height: 30px;
            line-height: 30px;
            width: 55%;
            height: 60px;
            display: flex;
            flex-direction: column;
        }

        .cpcs2-2 p {
            padding-left: 0px;
        }

        .cpcs-3 {
            display: flex;
            padding: 50px;
        }

        .cpcs-3-1 {
            width: 50px;

        }

        .cpcs-3-2 {
            width: 50px;
        }

        .a3 {
            position: relative;
            top: -4px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding-left: 10px;        
            display: flex;
            box-sizing: border-box;        
        }
        .introduce img {
            width: 89%;
            height: 196px;
            margin-left: 20PX;
            /* margin: 0 auto; */
            /* margin-bottom: 50px; */
        }

        .a3-1 {
            width: 35%;
        }

        .a3-2 {
            width: 65%;
        }
        /* table */
        .table{
            box-sizing: border-box;
            border-collapse: collapse;
            width: 100%;
            height: 400px;
            /* background: skyblue; */
            display: flex;
            flex-direction: column;
            /* margin-bottom: 8px; */
          
        }
        .table1{
            box-sizing: border-box;
            border-collapse: collapse;
            width: 96%;
            /* border: 1px solid #AAA; */
            box-sizing: border-box;
            margin: 0 auto;
            height: 98%;
        }
        .table1 div{
            border-collapse: collapse;
            box-sizing: border-box;
            color: #555;
            /* height: 30px; */
            line-height: 30px;
            border: 1px solid #AAA;
        }
        .table1-1 span{
            display: inline-block;
            border-right: solid 1px #AAA;
           padding-right: 30px;
           margin-right: 10px;
        }
        .table1 .table1-2{
            display: flex;
            flex-direction: row;
        }
        .table1-2-1{
            width: 30%;
        }
        .table1-2-2 {
            width: 70%;
        }
        .table1-2 span{
            display: inline-block;
            border-right: solid 1px #AAA;
           padding-right: 30px;
           margin-right: 10px;
        }
    </style>